<template>
	<view class="edit-wrapper">
		<scroll-view class="content-wrapper" :scroll-y="true">
			<view class="base-info-wrapper">
				<view class="head">
					<view class="left">
						经营信息
					</view>
					<view class="right">
						填写认证快速通过
					</view>
				</view>
				<view class="form-item">
					<view class="label-wrapper">
						<view class="label">
							<!-- <text class="check">*</text> -->
							店铺名称
						</view>
						<view class="value">
							<input class="input" v-model="formData.registerName" type="idcard" placeholder="请输入店铺名称"
								:placeholder-style="placeholderStyle" :maxlength="18" @input="handleNo" />
						</view>
					</view>
					<view class="label-wrapper padding-30">
						<view class="label align-center">
							<!-- <text class="check">*</text> -->
							注册区域
						</view>
						<view class="value">
							<view class="ico-location-box" @click="mapFn">
								<image class="ico-location mrr-20"
									src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-location.png"></image>
							</view>

							<picker class="picker" :value="selectArea" :range="[provinceList, cityList, areaList]"
								range-key="label" mode="multiSelector" @change="areaChange"
								@columnchange="areaColumnchange">
								<view class="flex-row">
									<view class="mrr-10" v-if="formData.districtName">
										{{ formData.districtName }}
									</view>
									<view class="text-second mrr-10" v-else>请选择经营地区</view>

									<image class="ico-arrow-right"
										src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-arrow-right.png">
									</image>
								</view>
							</picker>
						</view>
					</view>
					<view class="label-wrapper">
						<view class="label">
							<!-- <text class="check">*</text> -->
							详细地址
						</view>
						<view class="value">
							<input class="input" v-model="formData.registerAddress" type="idcard" placeholder="请输入详细地址"
								:placeholder-style="placeholderStyle" :maxlength="18" @input="handleNo" />
						</view>
					</view>
					<view class="label-wrapper">
						<view class="label">
							<!-- <text class="check">*</text> -->
							经营类别
						</view>
						<view class="value" @click="openCategory()">
							<view class="mrr-10" v-if="formData.typeDesc">{{ formData.typeDesc }}</view>
							<view class="text-second mrr-10" v-else>请选择经营类别</view>

							<image class="ico-arrow-right"
								src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-arrow-right.png">
							</image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 选择经营品类 -->
		<uni-popup ref="alertDialog" type="bottom" background-color="#fff" @change="change"
			borderRadius="0rpx 0rpx 20rpx 20rpx">
			<view class="popup-business">
				<view class="title">
					经营品类
					<view class="btn-close" @click="onCloseBusiness">
						<image class="img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/popup-close.png">
						</image>
					</view>
				</view>

				<view class="select-wrapper">
					<view class="left">
						<view class="item" :class="{ 'active': businessCategoryIdx === index }"
							v-for="(item, index) in businessOpts" :key="index"
							@click="selectBusinessCategory(item, index)">
							{{ item.mccTxt }}
						</view>
					</view>
					<view class="right">
						<view class="item" v-for="(item, index) in businessSubOpts" :key="index"
							@click="selectBusinessCategorySub(item)">
							{{ item.mccTxt }}
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
	<view class="btn-list">
		<!-- <view class="btn-base w200 gray" @click="childUpBtn()">上一步</view> -->
		<button class="btn-base" @click="childNextBtn()">下一步</button>
		<!-- <view class="btn-base w470 blue" @click="childNextBtn()">下一步</view> -->
	</view>
</template>

<script setup>
	import {
		ref,

		onMounted,
		defineEmits
	} from 'vue';
	import {
		useStore
	} from '@/store/index';
	import {
		queryAreaList,
		queryBusinessList,
		wxLocation
	} from "@/api/common";
	// import { getOsssSignature, uploadImg } from '@/utils/upload';
	import {
		onlyCnReg,
		limitCardNoReg
	} from '@/utils/regExp';
	import {
		getOsssSignature,
		uploadImg
	} from '@/utils/upload';
	import {
		showToast
	} from "@/utils/toast";
	const props = defineProps({
		submitShow: Boolean
	});
	// 定义要触发的事件
	const emit = defineEmits(['upBtn', 'nextBtn']);
	/** 获取省市区列表 */
	let selectArea = ref([]);
	let provinceList = ref([]);
	let cityList = ref([]);
	let areaList = ref([]);
	let areaOpts = [];
	let getAreaList = () => {
		queryAreaList().then((res) => {
			areaOpts = res;
			initAreaData(areaOpts);
			// setTimeout(() => {
				res.forEach((item)=>{
					
					if (item.name == location_province.value) {
						formData.value.provinceId = item.code;
						
						item.children.forEach((c) => {
							if (c.name == location_city.value) {
								formData.value.cityId = c.code;
						
								c.children.forEach((a) => {
									
									if (a.name == location_district.value) {
										formData.value.areaId = a.code;
					
									}
								});
								
							}
						});
				
					}
				});
			// }, 1500);
		
		});
	}
	let location_province = ref(null);
	let location_city = ref(null);
	let location_district = ref(null);
	let businessOpts = ref([]);
	let businessSubOpts = ref([]);
	let businessCategoryIdx = ref(0);
	/** 生命周期 */
const locationParams=ref({
	lat:"",
	lng:''
})
	onMounted(async () => {

		getLocationAddress();
		getAreaList();

	});
	// 初始化省市区数据
	function initAreaData(areaOpts) {
		// 省
		provinceList.value = areaOpts.map((p) => {
			
			return {
				label: p.name,
				value: p.code,
				children: p.children,
			};
		});
		// 市
		cityList.value = provinceList.value[0].children.map((c) => {

			return {
				label: c.name,
				value: c.code,
				children: c.children,
			};
		});
		// 区
		areaList.value = cityList.value[0].children.map((a) => {
			

			return {
				label: a.name,
				value: a.code,
			};
		});
	}

	/** store实例 */
	const store = useStore();

	// oss签名配置
	let ossConfig = {};
	// 创建响应式数据  
	const alertDialog = ref();
	// 输入框提示语样式
	const placeholderStyle = 'color: #999999';

	// 表单数据
	let formData = ref({
		registerName: ''
	});
	// 获取当前经纬度
	let getLocationAddress = () => {
		console.log("获取定位")
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				locationParams.value.lat=res.latitude;
				locationParams.value.lng=res.longitude;
				wxLocation(locationParams.value).then((res) => {
						console.log("res=" + JSON.stringify(res))
						
									location_province.value =res.address_component.province;
									location_city.value = res.address_component.city;
									location_district.value = res.address_component.district;
									formData.value.districtName =
										res.address_component.province +
										"-" +
										res.address_component.city +
										"-" +
										res.address_component.district;
					})
					.catch((error) => {
						showToast(error.data.message || error.data.error);
					});
				
				// uni.request({
				// 	url: '/amap/ws/geocoder/v1/',
				// 	method: 'GET',
				// 	data: {
				// 		location: res.latitude + ',' + res.longitude,
				// 		key: 'JUJBZ-N3B3J-T6JFN-XGN2S-FDUB3-L7FBP'
				// 	},

				// 	success: function(res) {
				// 		console.log('地址解析成功：', res);
				// 		let data = res.data;
				// 		if (data.status == 0) {
				// 			//根据返回的省市区，匹配接口返回的省市区

				// 			// locationCity.value = data.result.address_component.city;
				// 			location_province.value = data.result.address_component.province;
				// 			location_city.value = data.result.address_component.city;
				// 			location_district.value = data.result.address_component.district;
				// 			formData.value.districtName =
				// 				data.result.address_component.province +
				// 				"-" +
				// 				data.result.address_component.city +
				// 				"-" +
				// 				data.result.address_component.district;
				// 		} else {
				// 			console.log(data.message);
				// 		}

				// 	},
				// 	fail: function(res) {
				// 		console.log('地址解析失败：', res);
				// 	}
				// });
			},
			fail: function(res) {
				console.log('获取定位失败：', res);
			}
		});
	}

	function openCategory() {

		// 获取行业列表
		getBusinessList();
		alertDialog.value.open()
	}

	// 暴露方法
	// defineExpose({ getAreaList });
	// 选择地区时
	function areaChange(e) {
		// console.log("e=" + JSON.stringify(e))
		let {
			value
		} = e.detail;
		value = value.map((item) => {
			if (item === null) {
				return (item = 0);
			}
			return item;
		});

		formData.value.districtName =
			provinceList.value[value[0]].label +
			"-" +
			cityList.value[value[1]].label +
			"-" +
			areaList.value[value[2]].label;
		formData.value.provinceId = provinceList.value[value[0]].value;
		formData.value.cityId = cityList.value[value[1]].value;
		formData.value.areaId = areaList.value[value[2]].value;

	}
	// 选择地区列改变时
	function areaColumnchange(e) {
		const {
			column,
			value
		} = e.detail;
		switch (column) {
			case 0:
				// 省
				handleProvinceData(value);
				break;
			case 1:
				// 市
				handleCityData(value);
				break;
			case 2:
				// 区
				break;
			default:
		}
	}

	// 省数据改变时处理
	function handleProvinceData(val) {
		cityList.value = provinceList.value[val].children.map((c) => {
			return {
				label: c.name,
				value: c.code,
				children: c.children,
			};
		});
		areaList.value = cityList.value[0].children.map((c) => {
			return {
				label: c.name,
				value: c.code,
			};
		});
	}

	// 市数据改变时处理
	function handleCityData(val) {
		areaList.value = cityList.value[val].children.map((c) => {
			return {
				label: c.name,
				value: c.code,
			};
		});
	}

	function getBusinessList() {
		queryBusinessList().then((res) => {
			// console.log('行业类型=>', res);
			const result = res;
			businessOpts.value = result;
			businessSubOpts.value = result[0].mccDos;
		});
	}
	// 选择经营主品类
	function selectBusinessCategory(item, index) {
		businessSubOpts.value = businessOpts.value[index].mccDos;
		businessCategoryIdx.value = index;
	}

	// 选择经营次品类
	function selectBusinessCategorySub(item) {
		// console.log('经营次品类=>', item);
		formData.value.type = item.mccCode;
		formData.value.typeDesc = item.mccTxt;
		alertDialog.value.close()
	}
	const childUpBtn = () => {
		emit('upBtn');
	}
	const childNextBtn = () => {
		emit('nextBtn', formData.value, 2)
	}
</script>

<style lang='scss' scoped>
	@import './index.scss';
</style>